| 基于Vue快速搭建超图二维iClient开发环境 | 您所在的位置：网站首页 › vue bim › 基于Vue快速搭建超图二维iClient开发环境 |
基于Vue快速搭建超图二维iClient开发环境
|
作者:lly 一、背景最近很多小伙伴咨询关于基于Vue框架搭建iClent开发环境的问题，今天我们就以iClient for Leaflet为例，来聊聊如何快速搭建超图二维JS开发环境，由于11i版本更新，如需使用ES6语法，添加配置项后，只支持按需引入，否则会报 TypeError: Cannot read properties of undefined (reading ‘tiledMapLayer’)的错误。 注：本文于2022.8.12更新，基于"@supermap/iclient-leaflet": "^11.0.0"测试，其余版本请以官网开发指南为准 二、配置准备1.首先需要安装node.js,可参考以下文章安装步骤及配置 2.配置完node.js后，注册淘宝镜像，提高下载速度 npm install -g cnpm --registry=https://registry.npm.taobao.org3.安装Vue CLI cnpm install -g @vue/cli4.创建一个项目 vue create leafletdemo5.项目创建完后使用开发工具打开项目，我这里使用WebStorm为例 6.运行项目，看到以下页面证明基本项目搭建成功 1.首先前往iClient 官网 2.在导航栏找到Leaflet，鼠标移动上去下拉菜单点击开发指南 3.进入后，找到npm方式引入，并在开发工具的Terminal中安装相应模块 然后，在.babelrc或babel.config.js中添加如下配置： { "plugins": [ ["@supermap/babel-plugin-import", { "libraryName": "@supermap/iclient-leaflet" } ] ] }6.我们找到入口页面index.html,以CDN方式引入css样式文件，地址可在开发指南中查找；设置body样式，并删除模板中无用的标签，注引入css文件会随版本更新，请以官网开发指南中为准。 7.在componets文件夹中新建一个vue文件，并在模板中创建一个div标签 8.设置style样式 #map { margin: 0; overflow: hidden; background: #fff; width: 100%; height:100%; position: absolute; }9.引入相应模块，这里我们进行按需引入 import L from 'leaflet'; import {TiledMapLayer} from '@supermap/iclient-leaflet';10.在mounted中创建地图容器并展示 var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World"; var map = L.map('map', { crs: L.CRS.EPSG4326, center: [0, 0], maxZoom: 18, zoom: 1 }); var layer = new TiledMapLayer(url) layer.addTo(map);11.在App.vue中引入我们刚才创建的组件 import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } }12.直接在package.json中点击serve运行 13.在浏览器查看运行结果 针对iClient for MapboxGL与iClient for OpenLayers引入方式与Leaflet相同，只需替换css、引入模块及初始化代码即可;iClient for Classic 引入地址，安装后按照module中的README进行使用。 |
注：该引入方式为拉取最新包，文章测试为11.0.0版本，如为更新版本，请以开发指南为准。 4.安装完成后，我们可以在node_modules中看到@supermap的目录 
5.进行ES6配置 首先，安装 @supermap/babel-plugin-import
【本文地址】